<template>
	<view>
		<view class="top">
			<div class="box1">
				{{data.title}}
			</div>
			<div class="box2">
				{{data.text}}
			</div>
			<div class="box3">
				交易成功<span>{{data.fan}}</span>
			</div>
		</view>
		<div class="xian"></div>
		<div class="con">
			<div class="box1">
				<view class="left">
					类型
				</view>
				<view class="right">
					兑换
				</view>
			</div>
			<div class="box1">
				<view class="left">
					交易方式
				</view>
				<view class="right">
					积分
				</view>
			</div>
			<div class="box1">
				<view class="left">
					积分情况
				</view>
				<view class="right">
					{{data.detil}}
				</view>
			</div>
			<div class="box1">
				<view class="left">
					获得零钱
				</view>
				<view class="right">
					+20
				</view>
			</div>
			<div class="box1">
				<view class="left">
					交易时间
				</view>
				<view class="right">
					{{Number(data.time) | formatdate}}
				</view>
			</div>
			<div class="box1">
				<view class="left">
					订单号
				</view>
				<view class="right">
					20215156161661
				</view>
			</div>
		</div>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				data:[]
			};
		},
		onLoad(options) {
			var data = options.id;
			console.log(data)
			this.$api.seapsxdetil({
				id: options.id
			}).then(res => {
				this.data = res.data
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.con {
		height: 440rpx;
		width: 85%;
		margin: auto;

		.box1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 40rpx 0;

			.left {
				// width: 54rpx;
				height: 28rpx;
				font-family: YouYuan;
				font-size: 28rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #323232;
			}

			.right {
				// width: 54rpx;
				height: 27rpx;
				font-family: YouYuan;
				font-size: 28rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #323232;
			}
		}
	}

	.xian {
		width: 710rpx;
		height: 1rpx;
		background-color: #cbcbcb;
		margin: auto;
	}

	.top {
		height: 240rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;

		.box1 {
			// width: 154rpx;
			// height: 36rpx;
			font-family: YouYuan;
			font-size: 38rpx;
			font-weight: bold;
			font-stretch: normal;
			letter-spacing: 0px;
			color: #323232;
		}

		.box2 {
			// width: 178px;
			// height: 29rpx;
			font-family: YouYuan;
			font-size: 30px;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0px;
			color: #323232;
		}

		.box3 {
			// width: 170px;
			height: 24rpx;
			font-family: YouYuan;
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0px;
			color: #646464;

			span {
				font-family: YouYuan;
				font-size: 24rpx;
				font-weight: bold;
				letter-spacing: 0px;
				color: #8fc31f;
			}
		}
	}
</style>
